<template>
  <view class="ver-layout">
    <u-swiper indicator indicatorMode="dot" imgMode="scaleToFill" height="200" :list="list1" @change="change" @click="click"></u-swiper>
    <view class="notice-view">
      <u-notice-bar class="notice-item" :text="noticeData" bgColor="white" color="#55BBB3"></u-notice-bar>
    </view>
    <!--  中间布局  -->
    <view class="hor-layout list-title-view">
      <view class="left-tag-view"></view>
      <view>获取收益</view>
    </view>
    <view class="hor-layout" style="margin: 15px;">
      <view class="hor-layout-side-center button-card left" @click="toPage(sellCard)">
        <view class="ver-layout">
          <view>售卖卡片</view>
          <view class="content">发布卡片信息</view>
        </view>
        <ali-icon size="40" font="icon-Givecashbag"></ali-icon>
      </view>
      <view class="hor-layout-side-center button-card right" @click="toPage(inviteFriend)">
        <view class="ver-layout">
          <view>邀请朋友</view>
          <view class="content">邀请朋友得赏金</view>
        </view>
        <ali-icon size="40" font="icon-Givecashbag"></ali-icon>
      </view>
    </view>
    <!--  底部列表  -->
    <view class="hor-layout list-title-view">
      <view class="left-tag-view"></view>
      <view>All Gift Cards</view>
      <text class="time">(2023-01-04 08:18)</text>
    </view>
    <view v-for="(item,index) in listData" :key="index">
      <view class="expand-item ver-layout">
        <view class="expand-title-layout hor-layout" @click="expandList(item)">
          <image :src="item.image" class="image"></image>
          <view class="ver-layout" style="flex: 1">
            <view class="name">{{ item.name }}</view>
            <view class="content">Fast redeem,Physical card or only code rate is same</view>
          </view>
          <view class="value ver-layout-side">
            <view>₦260~600</view>
            <u-icon class="expand-icon" name="arrow-down" color="#666666" size="17"
                    :class="{'expand':item.showContent}"></u-icon>
          </view>
        </view>
        <view class="expand-content-layout ver-layout" :class="{'display':item.showContent}">
          <check-group></check-group>
          <view class="type-content ver-layout">
            <view class="hor-layout-side title-view">
              <view>Face Value</view>
              <view>Rate</view>
            </view>
            <view class="hor-layout-side content-item">
              <view>50-200(include Ecode)</view>
              <view>₦500</view>
            </view>
            <view class="hor-layout-side content-item">
              <view>1-49(include Ecode)</view>
              <view>₦480</view>
            </view>
          </view>
          <view class="hor-layout" style="margin-top: 10px">
            <view style="flex:1"></view>
            <view class="hor-layout">
              <u-button type="primary" text="Calculator" size="small" @click="toPage(calculateValue)"></u-button>
              <u-button type="primary" text="More" size="small" style="margin-left: 10px"
                        @click="toPage(cardTrade)"></u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 50px"></view>
  </view>
</template>

<script>
import checkGroup from "@/components/check-group";
import {sellCard, inviteFriend, calculateValue, cardTrade} from "@/router";

export default {
  name: "home",
  components: {
    checkGroup
  },
  data() {
    return {
      sellCard,
      inviteFriend,
      calculateValue,
      cardTrade,
      list1: [
        'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/swiper1.png',
        'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/swiper2.png',
        'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/swiper3.png',
      ],
      noticeData: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
      listData: [
        {
          id: 1, name: "Steam", image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png',
          types: []
        },
        {id: 2, name: "Steam", image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png'},
        {id: 3, name: "Steam", image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png'},
        {id: 4, name: "Steam", image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png'},
        {id: 5, name: "Steam", image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png'},
        {id: 6, name: "Steam", image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png'},
        {id: 7, name: "Steam", image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png'},
        {id: 8, name: "Steam", image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png'},
      ]
    }
  },
  methods: {
    change() {

    },
    click() {

    },
    close() {

    },
    expandList(item) {
      this.listData = this.listData.map(lItem => {
        if (lItem.id == item.id) lItem.showContent = !lItem.showContent
        return lItem
      })
    },
    selectTypeItem(tItem, item) {
      this.listData = this.listData.map(lItem => {
        if (lItem.id == item.id) {

        }
        return lItem
      })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background: #f7f7f7;
}

.notice-view {
  margin: 10px;
}

.notice-item {
  border-radius: 5px;
}

.card-layout {
  height: 100px;
  background: white;
  width: 90%;
  margin: auto;
  margin-top: 30px;
  border-radius: 10px;
}

.card-view {
  flex: 1;
}

.card-image {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #1b4c5b;
}

.cart-content {
  margin-top: 10px;
}

.card-text {
  font-size: small;
  font-weight: bold;
  margin-right: 5px;
}

.list-title-view {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: bold;
  color: #222222;
}

.list-title-view > .time {
  color: #999999;
  font-weight: lighter;
}

.expand-item {
  margin: 10px;
  margin-bottom: 0px;
  padding: 10px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 0 3px #d9d9d9;
}

.expand-title-layout {
  .image {
    width: 80px;
    height: 50px;
    margin-right: 7px;
    background: #f7f7f7;
  }

  .name {
    font-size: medium;
    color: #666666;
  }

  .content {
    font-size: 12px;
    color: #999999;
  }

  .value {
    width: 70px;
    font-size: small;
    margin-left: 7px;

    .expand-icon {
      margin-left: auto;
      transform: rotate(0deg);
      transition: all 0.3s;
    }

    .expand-icon.expand {
      color: #42B4AC;
      transform: rotate(180deg);
    }
  }
}

.expand-content-layout {
  display: none;
  overflow: hidden;
  -webkit-transition: height .5s ease-in-out;
  transition: height .5s ease-in-out;
  will-change: height;
}

.expand-content-layout.display {
  display: block;
  height: fit-content;
}

.type-content {
  background: #f8f8f8;
  border-radius: 5px;
  padding: 10px;
  font-size: small;

  .title-view {
    font-weight: bold;
  }

  .content-item {
    margin-top: 5px;
  }
}

.left-tag-view {
  width: 4px;
  margin-right: 8px;
  background: #42B4AC;
}

.button-card {
  flex: 1;
  padding: 10px 8px;
  border-radius: 5px;

  .content {
    color: #5b7878;
    margin-top: 10px;
    font-size: small;
  }
}

.left {
  background-color: #f6e8c7;
}

.right {
  margin-left: 10px;
  background-color: #cae8e2;
}
</style>
